<script setup>
import { ref, defineProps } from 'vue'
import BasePagination from '@/components/BasePagination/index.vue'
import BaseSearch from '@/components/BaseSearch/index.vue'
import TableFormat from '@/components/TableFormat/TableFormat.vue'
import { useApiMethod } from './useManagePage'
import useHelp from '@/hooks/help'
const props = defineProps({
  // 搜索项配置
  searchOption: {
    type: Array,
    default: () => []
  },
  // 增删改查接口配置
  apiOption: {
    type: Object,
    default: () => ({
      primaryKey: 'id'
    })
  },
  // 列表查询字段配置
  paramsMap: {
    type: Object,
    default: () => ({
      select: 'key',
      input: 'query',
      page: 'page',
      pageSize: 'pagesize'
    })
  }
})
const {
  searchParams,
  tableDate,
  total,
  tableLoading,
  search,
  create,
  update,
  del,
  sizeChange,
  currentChange
} = useApiMethod({ apiOption: props.apiOption, paramsMap: props.paramsMap })
const { dateFilter } = useHelp()

// 表格列配置
const columnOption = defineModel('columnOption', {
  type: Array,
  default: () => []
})

const formatVisible = ref(false)
const btnOption = ref([
  { label: '格式', visible: formatVisible }
])
for (const apiName in props.apiOption) {
  if (apiName === 'create') {
    btnOption.value.push({
      label: '新增',
      type: 'success',
      click: create
    })
  }
}
const btnClick = (item) => {
  if (Object.keys(item).includes('visible')) {
    item.visible = true
  }
  if (item.click) {
    item.click(item)
  };
}
</script>

<template>
  <div class="manage-page">
    <BaseSearch
      v-model="searchParams[props.paramsMap.input]"
      v-model:select="searchParams[props.paramsMap.select]"
      class="search-row"
      :search-option="searchOption"
      @search="search"
    />

    <div class="btn-row">
      <el-button
        v-for="item in btnOption"
        :key="item.index + 'btn'"
        :type="item.type || 'primary'"
        @click="btnClick(item)"
      >
        {{ item.label }}
      </el-button>
      <slot name="button" />
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="tableLoading"
      border
      stripe
      height="100%"
      class="table-date"
      :data="tableDate"
      :header-cell-style="{ color:'#606266', fontFamily:'微软雅黑' }"
    >
      <template v-for="item in columnOption">
        <el-table-column
          v-if="item.cshow"
          :key="item.index"
          :prop="item.field"
          :label="item.showname"
          :width="item.width"
          :align="item.align"
          :fixed="item.clock ? 'right' : false"
        >
          <template #default="{ row }">
            <!-- 时间格式化 -->
            <div v-if="item.field === 'created_at' || item.field === 'updated_at'">
              <div>{{ dateFilter(row.created_at, 0) }}</div>
              <div>{{ dateFilter(row.created_at, 1) }}</div>
            </div>
            <!-- 操作列插槽 -->
            <div v-else-if="item.field === 'operation'">
              <el-button
                type="primary"
                @click="update(row)"
              >
                修改
              </el-button>
              <slot
                name="tableOperation"
                :row="row"
              />
              <el-button
                type="danger"
                @click="del(row)"
              >
                删除
              </el-button>
            </div>
            <!-- 正常字段展示 -->
            <span v-else>
              {{ row[item.field] }}
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 分页器 -->
    <BasePagination
      :total="total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />

    <!-- 列排序 -->
    <TableFormat
      v-model="formatVisible"
      v-model:column-option="columnOption"
    />

    <slot name="dialog" />
  </div>
</template>

<style scoped lang="less">
.manage-page{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  .search-row{
    margin-bottom: 10px;
  }
  .btn-row{
    margin-bottom: 10px;
  }
  .table-date{
    flex-grow: 1;
  }
}
</style>
